import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, Text, TouchableHighlight, Dimensions, LayoutAnimation } from 'react-native';

const _windows = Dimensions.get('window');

class FirstButton extends Component {
    static propTypes = {
        title: PropTypes.string.isRequired,
        select: PropTypes.bool,
        index: PropTypes.number,
        clickAction: PropTypes.func
    };
    constructor(props) {
        super(props);
        this.onPressButton = this.onPressButton.bind(this);
    }
    onPressButton = ()=>{
        if (this.props.title){
            if(this.props.clickAction){
                this.props.clickAction(this.props.index?this.props.index:0);
            }
        }
    };

    render(){
        let color = this.props.select?'#CCCCCC':'#2D4486';
        return (
            <TouchableHighlight
                key={this.props.index}
                underlayColor='#2D4486'
                onPress={this.onPressButton}>
                <View style={styles.button}>
                    <Text style={[styles.buttonTitle,{borderColor:color}]} numberOfLines={1} > {this.props.title} </Text>
                </View>
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        //flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        width:(_windows.width/5),
        marginBottom:10
    },
    buttonTitle:{
        fontSize:16,
        color:'#FFFFFF',
        height:26,
        paddingLeft:10,
        paddingRight:6,
        paddingTop:3,
        borderWidth:1,
        borderRadius:13,
        borderColor:'#FFFFFF'
    }
});

export default FirstButton;
